
import { Svg, Path, Rect, Pattern, Use, ClipPath, Image } from "react-native-svg"
import { View } from "react-native"
import { IconProps } from "./types"
import { getColorStr } from "../../themes"
import { useGlobalStore } from "../../mobx"

export const SvgFirst = (props: IconProps) => {
    const { scale } = props
    const { theme } =useGlobalStore()
    return (
        <View style={{ transform: `scale(${scale || 1})` }}>
            <Svg width="104" height="86" viewBox="0 0 104 86" fill="none" >
                <Rect width="104" height="86" fill="url(#pattern0)"></Rect>
                <Path d="M62.8 29.6V26H41.2V29.6H34V35C34.0102 37.1676 34.8024 39.2587 36.231 40.889C37.6595 42.5193 39.6285 43.5792 41.776 43.874C42.3988 45.7232 43.5109 47.3691 44.9941 48.6368C46.4774 49.9046 48.2764 50.7468 50.2 51.074V58.4H44.8V62H59.2V58.4H53.8V51.038C55.7236 50.7108 57.5226 49.8686 59.0059 48.6008C60.4891 47.3331 61.6012 45.6872 62.224 43.838C64.3654 43.5441 66.3295 42.4894 67.7573 40.8666C69.1851 39.2438 69.9812 37.1614 70 35V29.6H62.8ZM37.6 35V33.2H41.2V40.094C40.1467 39.7216 39.2349 39.0317 38.5901 38.1194C37.9453 37.207 37.5994 36.1172 37.6 35V35ZM66.4 35C66.4006 36.1172 66.0547 37.207 65.4099 38.1194C64.7651 39.0317 63.8533 39.7216 62.8 40.094V33.2H66.4V35Z" fill={getColorStr(theme, 'color_2')}></Path>
                <Path d="M56.4795 36.4548C56.4303 36.3029 56.2988 36.1922 56.141 36.1695L53.5397 35.7915L52.3762 33.4341C52.3056 33.2909 52.1598 33.2002 52.0002 33.2002C51.8405 33.2002 51.6947 33.2909 51.6241 33.4341L50.4606 35.7915L47.859 36.1695C47.7009 36.1925 47.5697 36.3029 47.5205 36.4548C47.4712 36.6068 47.5124 36.7733 47.6267 36.8847L49.5093 38.7196L49.0649 41.3106C49.038 41.468 49.1025 41.627 49.2317 41.721C49.3609 41.8149 49.532 41.8272 49.6735 41.7527L52.0005 40.5293L54.3271 41.7527C54.3883 41.7848 54.4554 41.801 54.5221 41.801C54.6089 41.801 54.6957 41.7741 54.7686 41.721C54.8979 41.627 54.9623 41.468 54.9354 41.3106L54.491 38.7196L56.3736 36.8847C56.4876 36.7733 56.5287 36.6068 56.4795 36.4548Z" fill={getColorStr(theme, 'color_1')}>
                </Path>
                <Pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                    <Use xlinkHref="#image0_2264_1613" transform="translate(0 -0.0015631) scale(0.00163934 0.00198246)"></Use>
                </Pattern>
                <ClipPath id="clip0_2264_1613">
                    <Rect width="10.8" height="10.8" fill={getColorStr(theme, 'color_2')} transform="translate(46.6001 33.2002)"></Rect>
                </ClipPath>
                <Image
                    id="image0_2264_1613"
                    width="610"
                    height="506"
                    xlinkHref=""
                ></Image>
            </Svg>
        </View>
    )
}
